<template>
  <div ref="gaugecharts" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, reactive, watchEffect, watch, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  name: 'gaugecharts',
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '280px',
    },
  },
  setup(props) {
    const gaugecharts = ref<HTMLDivElement | null>(null);
    const { setOptions, echarts, resize } = useECharts(gaugecharts as Ref<HTMLDivElement>);
    let legend = props.chartData.map((item) => {
      return item.name;
    });
    let seriesData = props.chartData;
    const option = reactive({
      tooltip: {
        formatter: "{a} <br/>{c} {b}"
      },
      series: [
        {
          name: props.chartData[0].name,
          type: 'gauge',
          z: 3,
          min: 0,
          // max: 10000,
          splitNumber: 4, // 刻度总数
          pointer: {  //指针宽度
            width: 5,
            length: '70%',
            // icon: 'circle',
            itemStyle: {
              color: '#00a096'
            },
          },
          radius: '90%',// 仪表盘外半径
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 15,// 圈粗细
              color: [[1, '#00a096']]
            }
          },
          axisLabel: {
            fontSize: 12,
            fontStyle: "oblique",
            color: "00a096"
          },
          axisTick: {            // 坐标轴小标记
            length: 3,        // 属性length控制线长
            distance: 0,
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#00a096',
              width: 1
            }
          },
          splitLine: {           // 分隔线
            length: 10,         // 属性length控制线长
            distance: 0,
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              color: '#00a096',
              width: 1
            }
          },
          title: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'normal', // 字体粗细
              fontStyle: 'italic',// 属性fontStyle控制线长
            },
            fontSize: 14,
            offsetCenter: [0, '110'],       //单位位置
          },
          detail: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'normal', // 字体粗细
              color: '#00a096'
            },
            fontSize: 18,
            offsetCenter: [0, '90'],
          },
          data: [props.chartData[0]]
        },
        {
          name: props.chartData[1].name,
          type: 'gauge',
          center: ['18%', '55%'],    // 默认全局居中
          min: 0,
          // max: 800,
          endAngle: 45,
          splitNumber: 4, // 刻度总数
          pointer: {  //指针宽度
            width: 5,
            length: '70%',
            // icon: 'circle',
            itemStyle: {
              color: '#00a096'
            },
          },
          radius: '70%',// 仪表盘外半径
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 15,// 圈粗细
              color: [[1, '#00a096']]
            }
          },
          axisLabel: {
            fontSize: 12,
            fontStyle: "oblique",
            color: "00a096"
          },
          axisTick: {            // 坐标轴小标记
            length: 3,        // 属性length控制线长
            distance: 0,
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#00a096',
              width: 1
            }
          },
          splitLine: {           // 分隔线
            length: 10,         // 属性length控制线长
            distance: 0,
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              color: '#00a096',
              width: 1
            }
          },
          title: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'normal', // 字体粗细
              fontStyle: 'italic',// 属性fontStyle控制线长
            },
            fontSize: 14,
            offsetCenter: [0, '110'],       //单位位置
          },
          detail: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'normal', // 字体粗细
              color: '#00a096'
            },
            fontSize: 18,
            offsetCenter: [0, '90'],
          },
          data: [props.chartData[1]]
        },
        {
          name: props.chartData[2].name,
          type: 'gauge',
          center: ['83%', '55%'],    // 默认全局居中

          min: 0,
          // max: 100,
          startAngle: 140,
          endAngle: -45,
          splitNumber: 4, // 刻度总数
          pointer: {  //指针宽度
            width: 5,
            length: '70%',
            // icon: 'circle',
            itemStyle: {
              color: '#00a096'
            },
          },
          radius: '70%',// 仪表盘外半径
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 15,// 圈粗细
              color: [[1, '#00a096']]
            }
          },
          axisLabel: {
            fontSize: 12,
            fontStyle: "oblique",
            color: "00a096"
          },
          axisTick: {            // 坐标轴小标记
            length: 3,        // 属性length控制线长
            distance: 0,
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#00a096',
              width: 1
            }
          },
          splitLine: {           // 分隔线
            length: 10,         // 属性length控制线长
            distance: 0,
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              color: '#00a096',
              width: 1
            }
          },
          title: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'normal', // 字体粗细
              fontStyle: 'italic',// 属性fontStyle控制线长
            },
            fontSize: 14,
            offsetCenter: [0, '110'],       //单位位置
          },
          detail: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'normal', // 字体粗细
              color: '#00a096'
            },
            fontSize: 18,
            offsetCenter: [0, '90'],
          },
          data: [props.chartData[2]]
        }
      ]
    })


    
    watch(
        () => props.chartData,
        () => {
          props.chartData && initCharts();
        },
        { deep: true }
      );
    /**
     * 监听拖拽大小变化
     */

    function initCharts() {
      console.log('initCharts props.chartData', props.chartData);
      
      if (props.option) {
        Object.assign(option, cloneDeep(props.option));
      }
      // let seriesData = props.chartData.map((item) => {
      //   return item.value;
      // });

      // option.series[0].data = seriesData;

      setOptions(option);
    }
    onMounted(() => {
      window.addEventListener('resize', function () {
        // console.log('resize');
        resize();
      });
    })

    return { gaugecharts };
  },
});
</script>
